<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>404财富管家</title>
<meta name="keywords" content="财富管家" />
<meta name="description" content="财富管家" />
<link rel="shortcut icon" th:href="@{/images/littlelogo.png}">
<link rel="icon" th:href="@{/favicon.ico}" mce_href="/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/css/user.css}"/>
<link th:href="@{/css/iconfont/RjdaoIcon.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/bs.css}" rel="stylesheet">
<link th:href="@{/css/index.css}" rel="stylesheet">
<link th:href="@{/css/layui/css/layui.css}" rel="stylesheet" />
<!--<script type="text/javascript" th:src="@{/css/layui/layui.js}"></script>-->
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/highcharts.js}"></script>
<script th:src="@{/js/layer/layer.js}" charset="utf-8"></script>
<script th:src="@{/js/echarts.common.min.js}" charset="utf-8"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/grid-light.js"></script>
-->
</head>

<body>

<!----header s---->
<div class="topnav">
	<div class="mainw w">
		<div class="l-txt">欢迎致电：400-1234-123 &nbsp;&nbsp; 服务时间：08:30-17:30（工作日）</div>

		<a th:href="@{/information/xinxi2}" class="dh">帮助中心</a>
		<a th:href="@{/information/xinxi3}" class="dh">新手指引</a>

	</div>
</div>
<header>
	<div class="hmain w">
      <a th:href="@{/index}" class="logo"><img th:src="@{/images/logo.png}"></a>
      <a th:href="@{/login}" class="ubut">退出</a>
      <a th:href="@{/userCenter/index}" class="ubut" style="padding:0 15px;background-color: #C9302C;color: white;">个人中心<span><dl th:text="${'我的资产:'+user.balance}">我的资产：2830.00</dl></span></a>
     <nav>
		 <a th:href="@{/index}" class="cur">首页</a>
		 <a th:href="@{/invest/list}">我要投资</a>
		 <a th:href="@{/borrowCenter/index}">我要借贷</a>
		 <a th:href="@{/zhongchou/list}">众筹中心</a>
		 <a th:href="@{/information/xinxi1}">信息披露</a>
    </nav>
    </div>
</header>
<!----header e---->



<!---user top s---->
<div class="user-top">

	<div class="userinfo">

    	<a href="" class="portrait" style="margin-top:10px;"><em>编辑头像</em><img th:src="@{/images/user-portrait.jpg}"></a>
        <div class="minfo" style="margin-top:30px;">
        	<div class="it"><dl>ID：</dl><span class="mr1" th:text="${user.id + 10000}">633748</span> <dl>用户名：</dl><span th:text="${user.tell}">xiezhengyi</span></div>
            <div class="it">
                <dl>绑定手机号：</dl><span th:text="${user.tell}">187****6613</span>
                <a class="ml1" title="手机" th:href="@{/userCenter/safe}"><i class="icon-0566"></i></a>
                <a th:href="@{/userCenter/account}" class="ml1" title="设置"><i class="icon-0421"></i></a>
            </div>
        </div>

        <div class="capital">
        	<dl>我的总资产</dl><em th:text="${user.balance}">258.00</em>
        </div>
        <div class="capital2">
        	<a href="javascript:void(0);" onclick="recharge()" class="ti">充值</a>
        	<a href="javascript:void(1);" onclick="forward()" class="ti">提现</a>
        </div>

    </div>

    <div class="nav">
    	<a th:href="@{/userCenter/index}" class="l"><i class="icon-0101" style="color: orange;"></i><span style="color: orange;">我的项目</span></a>
    	<a th:href="@{/userCenter/loan}" class="l"><i class="icon-0101" ></i><span >我的借贷</span></a>
    	<a th:href="@{/userCenter/Crowd}" class="l"><i class="icon-0941"></i><span>我的众筹</span></a>
        <a th:href="@{/userCenter/transaction}" class="l"><i class="icon-0423"></i><span>交易记录</span></a>
        <a th:href="@{/userCenter/account}" class="l"><i class="icon-0841"></i><span>账户设置</span></a>
       	<a th:href="@{/userCenter/safe}" class="l"><i class="icon-0282"></i><span>安全设置</span></a>
        <a th:href="@{/login}" class="r"><i class="icon-0735"></i><span>退出</span></a>
    </div>

</div>
<!--user top e-->

<!---user top e---->
<div class="u-main">

	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px;height:400px;"></div>


	<div class="zsdata" style="margin-top: -312px;">
		<h1>投资项目总览</h1>
	    <div class="text"><span>总投资金额</span><em style="color:#666" th:text="'￥'+(${allInvestMoney}==null? 0.0:${allInvestMoney})">￥70,000.00</em></div>
	    <!--<div class="text"><span>每期回报额</span><em th:text="'￥'+(${MonthInvestBalance}==null? 0.0:${MonthInvestBalance})">￥554.00</em></div>-->
		<div class="text"><span>已收益金额</span><em th:text="'￥'+(${sumreturned}==null? 0.0:${sumreturned})">￥583.00</em></div>
	</div>

</div>

<div>
	<table class="layui-table" lay-skin="nob" lay-size="lg" lay-even >
		  <colgroup>
		    <col width="450">
		    <col width="100">
		    <col width="150">
		    <col width="150">
		    <col width="150">
		    <col width="150">
		    <col width="150">
		  </colgroup>
		  <thead>
		    <tr style="text-align: center;">
		     	<th>投资项目名称</th>
				<th>投资金额</th>
				<th>年化回报率</th>
				<th>月回报金额</th>
				<th>总回报期数</th>
				<th>已回报期数</th>
				<th>月回报日期</th>
		    </tr>
		  </thead>
		  <tbody>
			<tr th:each="invest:${investments}">

				<td style="font-size: 20px;"th:text="${invest.projectname}"></td>
				<td style="font-size: 20px;" th:text="${invest.investmoney}+'元'">70,000.00</td>
				<td style="font-size: 20px;" th:text="${invest.rateofreturn}+'%'">10<span>%</span></td>
				<td style="font-size: 20px;" th:text="${invest.interest}+'元'">583<span>元</span></td>
				<td style="font-size: 20px;" th:text="${invest.borrowtime}+'期'">12<span>期</span></td>
				<td style="font-size: 20px;"  th:text="(${invest.returnedNum}==null? 0:${invest.returnedNum})+'期'"><span></span></td>
				<td style="font-size: 20px;" th:text="15号">15</td>
			</tr>
		  </tbody>
	</table>
</div>
<script type="text/javascript">

    var  data1;
    /*axios.get('/cms/userCenter/getEcharts').then(function(res){
        alert(res.data)
        data=res.data

    })*/
    $.ajax({
		url:'/cms/userCenter/getEcharts',
		type:'post',
		async:false,
		success:function (data) {
			data1=data
            console.log(data)
        }

	})

    console.log(data1)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {

        backgroundColor: '#2c343c',

        title: {
            text: '投资分布图',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'投资项目',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:data1,
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]

    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script th:inline="javascript">
    var userId = [[${user.id}]];//用户id
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    //var monthmoney = [[${user.balance}]];
</script>
<!--充值页面 s-->
<script type="text/javascript">
    function recharge() {
        //页面层
        layer.open({
            type: 2,
            title: '充值中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '470px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/recharge?id=' + userId
        });
    }
</script>
<!--充值页面 e-->
<!--提现页面 s-->
<script type="text/javascript">
    function forward() {
        //页面层
        layer.open({
            type: 2,
            title: '提现中心',
            skin: 'layui-layer-rim', //加上边框
            area: ['750px', '340px'], //宽高
            anim:4, //0-6的动画形式，-1不开启
            content: contextPath + '/userCenter/forward?id=' + userId
        });
    }
</script>
<!--提现页面 e-->


<!---footer s--->
<footer>
	<div class="fmain w">
    	<div class="fm-top">
        	<div class="left">

            	<div class="ilist">
                	<h1>联系我们</h1>
                    <div class="t">客服电话</div>
                    <div class="tel">400-1234-123</div>
                    <div class="t">邮箱：quanminsat@163.com</div>
                </div>

				<div class="ilist">
					<h1>关于我们</h1>
					<a th:href="@{/information/jianjie}">公司简介</a>
					<a th:href="@{/information/gonggao}">最新公告</a>
					<a th:href="@{/information/join_us}">加入我们</a>
				</div>
            </div>
            <div class="right">
            	<div class="ewm" style="margin-left:20px;"><img th:src="@{/images/gzh.jpg}"><span>关注公众号</span></div>
            </div>
        </div>
          <div class="fm-bot" style="text-align: center;">
        	<span>&copy; 2018 &nbsp;全民科技有限公司 &nbsp;京ICP备：123456789号 </span>
        	<br />
            <dl>市场有风险 投资需谨慎</dl>
        </div>
    </div>
</footer>
<!---footer e--->


</body>
</html>
